<template>
	<div>
		<el-form class="query-form" :model="query_params">
			<el-row>
		    <el-col class="query-item" :span="6">
					<el-form-item label="服务名称" prop="name">
						<el-input v-model="query_params.name" placeholder="请输入服务名称" autocomplete="off" />
					</el-form-item>
				</el-col>
				<el-col class="query-item" :span="6">
					<el-form-item >
						<el-button type="primary" @click="search">搜索</el-button>
					</el-form-item>
				</el-col>

		  </el-row>
		</el-form>
		<el-row class="add-box-css"><el-button type="primary" @click="activity_operation()">新增</el-button></el-row>
		<el-table :data="tableData" border style="width: 100%">
		    <el-table-column label="序号" width="180" >
				<template #default="scope">
		            {{scope.$index+1}}
		        </template>
		    </el-table-column>
		    <el-table-column prop="name" label="服务名称" width="180" />
		    <el-table-column prop="desc" label="服务内容" />
		    <el-table-column prop="all_count" label="服务次数" />
		    <el-table-column prop="createdAt" label="创建时间" />
				<!-- <el-table-column prop="disable" label="状态" >
					<template #default="scope">
							{{getStatus(scope.row)}}
					</template>
				</el-table-column> -->
		    <!-- <el-table-column  label="激活" >
		    	<template #default="scope">
		    		<el-switch  v-model="scope.row.disable" @click="confirm(scope.row)"/>
		      </template>
				</el-table-column> -->
				<el-table-column  label="操作" >
		    	<template #default="scope">
		    		<el-button type="primary" size="small" @click="activity_operation(scope.row)">编辑</el-button>
		    		<el-button type="danger" size="small" @click="del_fun(scope.row)">删除</el-button>
		      </template>
				</el-table-column>
		</el-table>
		<div class="pagination_box">
			<el-pagination background layout="prev, pager, next"  :total="total" @current-change="handleCurrentChange" />
		</div>
		<!-- 新增 & 编辑 -->
		<div>
			<el-drawer v-model="drawer" :direction="direction" size='60%' :with-header="true">
					<template #title>
						<h4>新增/编辑服务</h4>
					</template>
			    <template #default>
			      <div>
							<el-form
							    ref="ruleFormRef"
							    :model="ruleForm"
							    status-icon
							    :rules="rules"
							    label-width="120px"
							    class="demo-ruleForm"
							    :loading="loading"
							  >
							    <el-form-item label="服务名称" prop="name">
							      <el-input v-model="ruleForm.name"  autocomplete="off" />
							    </el-form-item>
							    <el-form-item label="服务内容" prop="desc">
							      <el-input v-model="ruleForm.desc"  autocomplete="off" />
							    </el-form-item>
							    <el-form-item label="标准次数" prop="all_count">
							      <el-input v-model="ruleForm.all_count"  autocomplete="off" />
							    </el-form-item>
							    <!-- <el-form-item label="所属门店" prop="store" :rules="[
						        { required: true, message: '请选择所属门店',trigger: 'blur' }
						      ]">
									<el-select v-model="ruleForm.store" class="m-2" placeholder="请选择所属门店">
								    <el-option
								      v-for="item in storeList"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id"
								    />
								  </el-select>
								</el-form-item> -->
								<!-- <el-form-item label="是否禁用">
							      <el-switch v-model="ruleForm.disable" />
							    </el-form-item> -->
							    <el-form-item >
							      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
							    </el-form-item>
							</el-form>
			      </div>
			    </template>
			  </el-drawer>
		</div>
	</div>
</template>
<script type="text/javascript">
	import {  ElMessageBox ,ElMessage} from 'element-plus'
	import api from "@/api/store/store"
	export default {
		data(){
			return {
				queryForm:{},
				query_params:{
					current:1,
					size:10
				},
				tableData:[],
				total:0,
				drawer:false,
				// 表单
				ruleFormRef:{},
				ruleForm :{},
				rules:{
				  name: [
				    { required: true, message: '请输入服务名称', trigger: 'blur' },
				  ],
				},
				storeList:[], // 门店列表
			}
		},
		methods:{
			del_fun(row){ // 删除数据
				console.log(row)
				ElMessageBox.alert('确定要删除该数据吗？', '提示', {
				    confirmButtonText: '确定',
				    callback:async action => {
					  console.log(action)
					  if(action == "confirm"){
					  		const res = await api.delService(row);
					  		if(res?.code == 200) {
					  		  ElMessage({
						        type: 'success',
						        message: '删除成功',
						      })
						      this.getList();
					  		}
					  }
				      
				    },
				 })
			},
			async submitForm(val){//提交表单
				this.cardParams();//梳理参数
				console.log(this.ruleForm);
				const res = await api.addService(this.ruleForm)
				if(res.code == 200) {
					ElMessage({
				        type: 'success',
				        message: '操作成功',
				    })
				    this.drawer = false;
					this.getList();
				}
			},
			cardParams(){ // 梳理数据
				//控制传参
				if(this.ruleForm.createdAt) delete this.ruleForm.createdAt
				if(this.ruleForm.updatedAt) delete this.ruleForm.updatedAt
				this.ruleForm.all_count = parseInt(this.ruleForm.all_count)
				// this.ruleForm.price = parseFloat(this.ruleForm.price)
				// this.ruleForm.pricing = parseFloat(this.ruleForm.pricing)
			},
			search(){
				this.query_params.current=1;
				this.query_params.size=10;
				//console.log(this.queryForm);
				this.getList()
			},
			activity_operation(row){//编辑 & 新增 服务
				this.drawer=true
				console.log(row);
				if(row){//编辑
						// 填充值
						for(let prop in row){
							this.ruleForm[prop]=row[prop]
						}
				}
				else{//新增
					this.ruleForm={}
				}
				// console.log(this.ruleForm);
			},
			getStatus(row){//查询状态
				// console.log(row);
				var str="正常"
				if(!row.disable){
					str="已禁止"
				}
				return str
			},
			handleCurrentChange(val){//分页
				console.log(val)
				this.query_params.current=val;
				this.getList();
			},
			async getList(){
				const res = await api.getServiceList(this.query_params)
				if(res.code == 200) {
					this.tableData=res.data.records;
						if(this.total<1){
							this.total=res.data.total
						}
						// 获取门店列表
						// api.getStoreList({
						// 	current:1,
						// 	size:100
						// }).then(res2=>{
						// 	this.storeList = res2.data.records
						// })
				}
			},
		},
		mounted(){
			this.getList();
		}
	}
</script>
<style type="text/css">
	.pagination_box{
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    width: 100%;
	}
	.query-item{
		margin-right:10px
	}
	.query-form{
		    padding:20px;
				    padding-bottom: 0px;
	}
	.add-box-css{
		width:100%;
		align-items: end;
    justify-content: end;
    padding: 0px 1rem 1rem 0px;
	}
</style>
